<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技能交换 - 筛选查询</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        
        .section-title {
            position: relative;
            display: inline-block;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -5px;
            width: 60px;
            height: 3px;
            background-color: #10b981;
        }
        
        .skill-card {
            transition: all 0.3s ease;
            height: 100%;
        }
        
        .skill-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        }
        
        .stats {
            font-size: 0.875rem;
        }
        
        .stats i {
            width: 16px;
            text-align: center;
        }
        
        .skill-tag {
            font-size: 0.75rem;
            padding: 0.2rem 0.5rem;
        }
        
        .image-container {
            position: relative;
            overflow: hidden;
        }
        
        .image-count {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 12px;
        }
        
        .no-image-placeholder {
            background-color: #f1f5f9;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #64748b;
            min-height: 180px;
        }
        
        .filter-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .filter-header {
            cursor: pointer;
            user-select: none;
        }
        
        .filter-collapse {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        
        .filter-collapse.show {
            max-height: 500px;
        }
        
        .badge-check {
            position: relative;
            margin-right: 0.5rem;
        }
        
        .badge-check::before {
            content: "\f00c";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.75rem;
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        
        .badge-check.active::before {
            opacity: 1;
        }
        
        .range-slider {
            width: 100%;
        }
        
        .search-container {
            position: relative;
        }
        
        .search-container input {
            padding-left: 2.5rem;
        }
        
        .search-container i {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: #64748b;
        }
        
        .sort-dropdown .dropdown-menu {
            min-width: auto;
        }
        
        .clear-filters {
            font-size: 0.875rem;
            cursor: pointer;
            transition: color 0.2s ease;
        }
        
        .clear-filters:hover {
            color: #dc3545;
        }
        
        .applied-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid #e2e8f0;
        }
        
        .applied-filter {
            background-color: #e8f5e9;
            color: #2e7d32;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.875rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .applied-filter .remove-filter {
            cursor: pointer;
            font-weight: bold;
        }
        
        .mobile-filter-btn {
            display: none;
        }
        
        @media (max-width: 768px) {
            .desktop-filters {
                display: none;
            }
            
            .mobile-filter-btn {
                display: block;
                margin-bottom: 1rem;
            }
            
            .filter-modal .modal-body {
                max-height: 70vh;
                overflow-y: auto;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-success sticky-top">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center gap-2" href="#">
                <i class="fas fa-exchange-alt"></i>
                <span>技能交换平台</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">技能交换</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">发现达人</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">我的交换</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center gap-3">
                    <button class="btn btn-outline-light">
                        <i class="fas fa-bell"></i>
                    </button>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle rounded-circle" type="button" data-bs-toggle="dropdown">
                            <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" width="36" height="36" class="rounded-circle">
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#">个人中心</a></li>
                            <li><a class="dropdown-item" href="#">我的技能</a></li>
                            <li><a class="dropdown-item" href="#">消息</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container py-5">
        <!-- 页面标题 -->
        <div class="mb-6">
            <h1 class="section-title">技能交换列表</h1>
            <p class="text-muted mt-3">发现合适的技能交换伙伴，筛选符合你需求的技能</p>
        </div>

        <!-- 移动端筛选按钮 -->
        <button class="btn btn-outline-success mobile-filter-btn" data-bs-toggle="modal" data-bs-target="#filterModal">
            <i class="fas fa-filter me-2"></i>筛选
        </button>

        <!-- 搜索和排序 -->
        <div class="row mb-4">
            <div class="col-md-6 mb-3 mb-md-0">
                <div class="search-container">
                    <i class="fas fa-search"></i>
                    <input type="text" class="form-control" placeholder="搜索技能、标签或用户...">
                </div>
            </div>
            <div class="col-md-6 d-flex justify-content-between align-items-center">
                <div class="text-muted">找到 <strong>128</strong> 个技能交换</div>
                <div class="sort-dropdown">
                    <div class="dropdown">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            <i class="fas fa-sort me-2"></i>排序方式
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item active" href="#"><i class="fas fa-check text-success me-2"></i>推荐排序</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-check text-success me-2 d-none"></i>最新发布</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-check text-success me-2 d-none"></i>最多浏览</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-check text-success me-2 d-none"></i>最多点赞</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-check text-success me-2 d-none"></i>最多评论</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 应用的筛选条件 -->
        <div class="applied-filters">
            <div class="applied-filter">
                语言学习 <span class="remove-filter">&times;</span>
            </div>
            <div class="applied-filter">
                有图片 <span class="remove-filter">&times;</span>
            </div>
            <div class="applied-filter">
                近7天发布 <span class="remove-filter">&times;</span>
            </div>
            <span class="clear-filters text-muted"><i class="fas fa-times me-1"></i>清除全部</span>
        </div>

        <div class="row">
            <!-- 左侧筛选栏 - 桌面端 -->
            <div class="col-md-3 desktop-filters">
                <!-- 技能分类筛选 -->
                <div class="filter-container mb-4">
                    <div class="filter-header d-flex justify-content-between align-items-center mb-3" data-target="category-filter">
                        <h5 class="mb-0">技能分类</h5>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div id="category-filter" class="filter-collapse show">
                        <div class="d-flex flex-wrap gap-2 mb-3">
                            <span class="badge badge-check bg-success text-white active">全部</span>
                            <span class="badge badge-check bg-light text-dark">语言学习</span>
                            <span class="badge badge-check bg-light text-dark">艺术创作</span>
                            <span class="badge badge-check bg-light text-dark">厨艺美食</span>
                            <span class="badge badge-check bg-light text-dark">运动健身</span>
                            <span class="badge badge-check bg-light text-dark">数码科技</span>
                            <span class="badge badge-check bg-light text-dark">手工制作</span>
                            <span class="badge badge-check bg-light text-dark">职场技能</span>
                            <span class="badge badge-check bg-light text-dark">音乐舞蹈</span>
                            <span class="badge badge-check bg-light text-dark">其他</span>
                        </div>
                    </div>
                </div>

                <!-- 发布时间筛选 -->
                <div class="filter-container mb-4">
                    <div class="filter-header d-flex justify-content-between align-items-center mb-3" data-target="time-filter">
                        <h5 class="mb-0">发布时间</h5>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div id="time-filter" class="filter-collapse show">
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="radio" name="time-filter" id="time-all" checked>
                            <label class="form-check-label" for="time-all">
                                全部时间
                            </label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="radio" name="time-filter" id="time-today">
                            <label class="form-check-label" for="time-today">
                                今天
                            </label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="radio" name="time-filter" id="time-week">
                            <label class="form-check-label" for="time-week">
                                近7天
                            </label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="radio" name="time-filter" id="time-month">
                            <label class="form-check-label" for="time-month">
                                近30天
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="time-filter" id="time-year">
                            <label class="form-check-label" for="time-year">
                                近一年
                            </label>
                        </div>
                    </div>
                </div>

                <!-- 内容筛选 -->
                <div class="filter-container mb-4">
                    <div class="filter-header d-flex justify-content-between align-items-center mb-3" data-target="content-filter">
                        <h5 class="mb-0">内容筛选</h5>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div id="content-filter" class="filter-collapse show">
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" id="has-images">
                            <label class="form-check-label" for="has-images">
                                有图片
                            </label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" id="has-videos">
                            <label class="form-check-label" for="has-videos">
                                有视频
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="verified">
                            <label class="form-check-label" for="verified">
                                认证用户
                            </label>
                        </div>
                    </div>
                </div>

                <!-- 热门程度筛选 -->
                <div class="filter-container mb-4">
                    <div class="filter-header d-flex justify-content-between align-items-center mb-3" data-target="popularity-filter">
                        <h5 class="mb-0">热门程度</h5>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div id="popularity-filter" class="filter-collapse show">
                        <div class="mb-3">
                            <label for="min-views" class="form-label text-sm">最低浏览量</label>
                            <input type="range" class="form-range range-slider" id="min-views" min="0" max="10000" step="100" value="0">
                            <div class="d-flex justify-content-between text-xs text-muted">
                                <span>0</span>
                                <span id="min-views-value">0</span>
                                <span>10,000+</span>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="min-likes" class="form-label text-sm">最低点赞数</label>
                            <input type="range" class="form-range range-slider" id="min-likes" min="0" max="1000" step="50" value="0">
                            <div class="d-flex justify-content-between text-xs text-muted">
                                <span>0</span>
                                <span id="min-likes-value">0</span>
                                <span>1,000+</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 位置筛选 -->
                <div class="filter-container">
                    <div class="filter-header d-flex justify-content-between align-items-center mb-3" data-target="location-filter">
                        <h5 class="mb-0">位置筛选</h5>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div id="location-filter" class="filter-collapse show">
                        <div class="mb-3">
                            <label for="city" class="form-label">城市</label>
                            <select class="form-select" id="city">
                                <option value="">不限城市</option>
                                <option value="beijing">北京</option>
                                <option value="shanghai">上海</option>
                                <option value="guangzhou">广州</option>
                                <option value="shenzhen">深圳</option>
                                <option value="hangzhou">杭州</option>
                                <option value="chengdu">成都</option>
                            </select>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="online-only">
                            <label class="form-check-label" for="online-only">
                                仅显示可线上交换
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧技能列表 -->
            <div class="col-md-9">
                <!-- 技能列表 - 网格布局 -->
                <div class="row gap-4">
                    <!-- 技能卡片 1 -->
                    <div class="col-md-6">
                        <div class="card skill-card">
                            <div class="image-container">
                                <img src="https://picsum.photos/id/20/600/400" alt="英语口语练习展示" class="card-img-top w-100" style="height: 180px; object-fit: cover;">
                                <span class="image-count">1</span>
                                <span class="badge bg-success exchange-badge">热门</span>
                            </div>
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <div>
                                        <h5 class="card-title mb-1">英语口语交换</h5>
                                        <p class="text-muted mb-0 text-sm">我教你中文，你教我英语</p>
                                    </div>
                                    <span class="badge skill-tag bg-primary">语言</span>
                                </div>
                                
                                <div class="d-flex align-items-center gap-2 mb-3">
                                    <img src="https://picsum.photos/id/1012/40/40" alt="技能提供者头像" class="rounded-circle" width="28" height="28">
                                    <span class="text-sm">陈明</span>
                                    <span class="text-xs text-muted">北京</span>
                                </div>
                                
                                <p class="card-text text-sm text-muted mb-3 line-clamp-2">
                                    英语专业毕业，现从事翻译工作，希望找到能进行日常口语练习的伙伴，我可以教你中文。
                                </p>
                                
                                <div class="d-flex justify-content-between stats text-muted border-top pt-2">
                                    <div><i class="fas fa-eye me-1"></i> 2.5k</div>
                                    <div><i class="fas fa-comment me-1"></i> 87</div>
                                    <div><i class="fas fa-bookmark me-1"></i> 342</div>
                                    <div><i class="fas fa-heart me-1"></i> 512</div>
                                    <div><i class="fas fa-clock me-1"></i> 3天前</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 技能卡片 2 -->
                    <div class="col-md-6">
                        <div class="card skill-card">
                            <div class="image-container">
                                <div class="row g-1">
                                    <div class="col-6">
                                        <img src="https://picsum.photos/id/1071/300/300" alt="日语学习资料1" class="w-100 h-100 object-fit-cover">
                                    </div>
                                    <div class="col-6">
                                        <div class="row g-1 h-100">
                                            <div class="col-12">
                                                <img src="https://picsum.photos/id/1072/300/150" alt="日语学习资料2" class="w-100 h-100 object-fit-cover">
                                            </div>
                                            <div class="col-12">
                                                <img src="https://picsum.photos/id/1073/300/150" alt="日语学习资料3" class="w-100 h-100 object-fit-cover">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <span class="image-count">5</span>
                            </div>
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <div>
                                        <h5 class="card-title mb-1">日语学习交换</h5>
                                        <p class="text-muted mb-0 text-sm">我教日语，想学韩语</p>
                                    </div>
                                    <span class="badge skill-tag bg-primary">语言</span>
                                </div>
                                
                                <div class="d-flex align-items-center gap-2 mb-3">
                                    <img src="https://picsum.photos/id/1074/40/40" alt="技能提供者头像" class="rounded-circle" width="28" height="28">
                                    <span class="text-sm">李日语</span>
                                    <span class="text-xs text-muted">上海</span>
                                </div>
                                
                                <p class="card-text text-sm text-muted mb-3 line-clamp-2">
                                    日本留学5年，日语N1水平，希望学习韩语基础，可交换日语学习。
                                </p>
                                
                                <div class="d-flex justify-content-between stats text-muted border-top pt-2">
                                    <div><i class="fas fa-eye me-1"></i> 876</div>
                                    <div><i class="fas fa-comment me-1"></i> 45</div>
                                    <div><i class="fas fa-bookmark me-1"></i> 128</div>
                                    <div><i class="fas fa-heart me-1"></i> 215</div>
                                    <div><i class="fas fa-clock me-1"></i> 1天前</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 技能卡片 3 -->
                    <div class="col-md-6">
                        <div class="card skill-card">
                            <div class="image-container">
                                <img src="https://picsum.photos/id/1058/600/400" alt="西班牙语学习展示" class="card-img-top w-100" style="height: 180px; object-fit: cover;">
                                <span class="image-count">2</span>
                            </div>
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <div>
                                        <h5 class="card-title mb-1">西班牙语交换</h5>
                                        <p class="text-muted mb-0 text-sm">我教西语，想学中文</p>
                                    </div>
                                    <span class="badge skill-tag bg-primary">语言</span>
                                </div>
                                
                                <div class="d-flex align-items-center gap-2 mb-3">
                                    <img src="https://picsum.photos/id/1062/40/40" alt="技能提供者头像" class="rounded-circle" width="28" height="28">
                                    <span class="text-sm">Carlos</span>
                                    <span class="text-xs text-muted">广州</span>
                                </div>
                                
                                <p class="card-text text-sm text-muted mb-3 line-clamp-2">
                                    西班牙人，在广州工作，想学习中文，可为你提供地道的西班牙语练习。
                                </p>
                                
                                <div class="d-flex justify-content-between stats text-muted border-top pt-2">
                                    <div><i class="fas fa-eye me-1"></i> 1.2k</div>
                                    <div><i class="fas fa-comment me-1"></i> 63</div>
                                    <div><i class="fas fa-bookmark me-1"></i> 156</div>
                                    <div><i class="fas fa-heart me-1"></i> 289</div>
                                    <div><i class="fas fa-clock me-1"></i> 5天前</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 技能卡片 4 -->
                    <div class="col-md-6">
                        <div class="card skill-card">
                            <div class="image-container no-image-placeholder">
                                <i class="fas fa-language fa-3x"></i>
                            </div>
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <div>
                                        <h5 class="card-title mb-1">法语学习交换</h5>
                                        <p class="text-muted mb-0 text-sm">我教法语，想学中文</p>
                                    </div>
                                    <span class="badge skill-tag bg-primary">语言</span>
                                </div>
                                
                                <div class="d-flex align-items-center gap-2 mb-3">
                                    <img src="https://picsum.photos/id/1066/40/40" alt="技能提供者头像" class="rounded-circle" width="28" height="28">
                                    <span class="text-sm">Sophie</span>
                                    <span class="text-xs text-muted">线上</span>
                                </div>
                                
                                <p class="card-text text-sm text-muted mb-3 line-clamp-2">
                                    法国人，法语母语者，想学习中文，可进行线上视频教学交换。
                                </p>
                                
                                <div class="d-flex justify-content-between stats text-muted border-top pt-2">
                                    <div><i class="fas fa-eye me-1"></i> 754</div>
                                    <div><i class="fas fa-comment me-1"></i> 38</div>
                                    <div><i class="fas fa-bookmark me-1"></i> 112</div>
                                    <div><i class="fas fa-heart me-1"></i> 198</div>
                                    <div><i class="fas fa-clock me-1"></i> 6天前</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 分页 -->
                <nav class="mt-8 d-flex justify-content-center">
                    <ul class="pagination">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1"><i class="fas fa-chevron-left"></i></a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">4</a></li>
                        <li class="page-item"><a class="page-link" href="#">5</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#"><i class="fas fa-chevron-right"></i></a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 移动端筛选模态框 -->
    <div class="modal fade" id="filterModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">筛选条件</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 移动端筛选内容，与桌面端相同 -->
                    <div class="mobile-filters">
                        <!-- 技能分类筛选 -->
                        <div class="mb-5">
                            <div class="filter-header d-flex justify-content-between align-items-center mb-3" data-target="mobile-category-filter">
                                <h5 class="mb-0">技能分类</h5>
                                <i class="fas fa-chevron-down"></i>
                            </div>
                            <div id="mobile-category-filter" class="filter-collapse show">
                                <div class="d-flex flex-wrap gap-2 mb-3">
                                    <span class="badge badge-check bg-success text-white active">全部</span>
                                    <span class="badge badge-check bg-light text-dark">语言学习</span>
                                    <span class="badge badge-check bg-light text-dark">艺术创作</span>
                                    <span class="badge badge-check bg-light text-dark">厨艺美食</span>
                                    <span class="badge badge-check bg-light text-dark">运动健身</span>
                                    <span class="badge badge-check bg-light text-dark">数码科技</span>
                                    <span class="badge badge-check bg-light text-dark">手工制作</span>
                                    <span class="badge badge-check bg-light text-dark">职场技能</span>
                                    <span class="badge badge-check bg-light text-dark">音乐舞蹈</span>
                                    <span class="badge badge-check bg-light text-dark">其他</span>
                                </div>
                            </div>
                        </div>

                        <!-- 发布时间筛选 -->
                        <div class="mb-5">
                            <div class="filter-header d-flex justify-content-between align-items-center mb-3" data-target="mobile-time-filter">
                                <h5 class="mb-0">发布时间</h5>
                                <i class="fas fa-chevron-down"></i>
                            </div>
                            <div id="mobile-time-filter" class="filter-collapse show">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="mobile-time-filter" id="mobile-time-all" checked>
                                    <label class="form-check-label" for="mobile-time-all">
                                        全部时间
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="mobile-time-filter" id="mobile-time-today">
                                    <label class="form-check-label" for="mobile-time-today">
                                        今天
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="mobile-time-filter" id="mobile-time-week">
                                    <label class="form-check-label" for="mobile-time-week">
                                        近7天
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="mobile-time-filter" id="mobile-time-month">
                                    <label class="form-check-label" for="mobile-time-month">
                                        近30天
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="mobile-time-filter" id="mobile-time-year">
                                    <label class="form-check-label" for="mobile-time-year">
                                        近一年
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- 内容筛选 -->
                        <div class="mb-5">
                            <div class="filter-header d-flex justify-content-between align-items-center mb-3" data-target="mobile-content-filter">
                                <h5 class="mb-0">内容筛选</h5>
                                <i class="fas fa-chevron-down"></i>
                            </div>
                            <div id="mobile-content-filter" class="filter-collapse show">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" id="mobile-has-images">
                                    <label class="form-check-label" for="mobile-has-images">
                                        有图片
                                    </label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" id="mobile-has-videos">
                                    <label class="form-check-label" for="mobile-has-videos">
                                        有视频
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="mobile-verified">
                                    <label class="form-check-label" for="mobile-verified">
                                        认证用户
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- 热门程度筛选 -->
                        <div class="mb-5">
                            <div class="filter-header d-flex justify-content-between align-items-center mb-3" data-target="mobile-popularity-filter">
                                <h5 class="mb-0">热门程度</h5>
                                <i class="fas fa-chevron-down"></i>
                            </div>
                            <div id="mobile-popularity-filter" class="filter-collapse show">
                                <div class="mb-3">
                                    <label for="mobile-min-views" class="form-label text-sm">最低浏览量</label>
                                    <input type="range" class="form-range range-slider" id="mobile-min-views" min="0" max="10000" step="100" value="0">
                                    <div class="d-flex justify-content-between text-xs text-muted">
                                        <span>0</span>
                                        <span id="mobile-min-views-value">0</span>
                                        <span>10,000+</span>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="mobile-min-likes" class="form-label text-sm">最低点赞数</label>
                                    <input type="range" class="form-range range-slider" id="mobile-min-likes" min="0" max="1000" step="50" value="0">
                                    <div class="d-flex justify-content-between text-xs text-muted">
                                        <span>0</span>
                                        <span id="mobile-min-likes-value">0</span>
                                        <span>1,000+</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 位置筛选 -->
                        <div>
                            <div class="filter-header d-flex justify-content-between align-items-center mb-3" data-target="mobile-location-filter">
                                <h5 class="mb-0">位置筛选</h5>
                                <i class="fas fa-chevron-down"></i>
                            </div>
                            <div id="mobile-location-filter" class="filter-collapse show">
                                <div class="mb-3">
                                    <label for="mobile-city" class="form-label">城市</label>
                                    <select class="form-select" id="mobile-city">
                                        <option value="">不限城市</option>
                                        <option value="beijing">北京</option>
                                        <option value="shanghai">上海</option>
                                        <option value="guangzhou">广州</option>
                                        <option value="shenzhen">深圳</option>
                                        <option value="hangzhou">杭州</option>
                                        <option value="chengdu">成都</option>
                                    </select>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="mobile-online-only">
                                    <label class="form-check-label" for="mobile-online-only">
                                        仅显示可线上交换
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">重置</button>
                    <button type="button" class="btn btn-success" data-bs-dismiss="modal">应用筛选</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8 mt-12">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-6">
                    <h5 class="mb-3">技能交换平台</h5>
                    <p class="text-muted">分享技能，结交朋友，共同成长</p>
                    <div class="d-flex gap-3 mt-4">
                        <a href="#" class="text-white"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-wechat fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-instagram fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-twitter fa-lg"></i></a>
                    </div>
                </div>
                <div class="col-md-2 mb-6">
                    <h5 class="mb-3">快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-muted">首页</a></li>
                        <li><a href="#" class="text-muted">技能交换</a></li>
                        <li><a href="#" class="text-muted">发现达人</a></li>
                        <li><a href="#" class="text-muted">发布技能</a></li>
                    </ul>
                </div>
                <div class="col-md-2 mb-6">
                    <h5 class="mb-3">帮助中心</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-muted">使用指南</a></li>
                        <li><a href="#" class="text-muted">常见问题</a></li>
                        <li><a href="#" class="text-muted">安全提示</a></li>
                        <li><a href="#" class="text-muted">联系我们</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5 class="mb-3">发布新技能</h5>
                    <p class="text-muted mb-3">分享你的专长，找到合适的技能交换伙伴</p>
                    <button class="btn btn-success w-100">
                        <i class="fas fa-plus me-1"></i> 发布技能
                    </button>
                </div>
            </div>
            <div class="border-top border-gray-700 mt-6 pt-6 text-center text-muted">
                <p>&copy; 2023 技能交换平台 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 筛选器折叠/展开功能
        document.querySelectorAll('.filter-header').forEach(header => {
            header.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                const targetElement = document.getElementById(targetId);
                const icon = this.querySelector('i');
                
                targetElement.classList.toggle('show');
                icon.classList.toggle('fa-chevron-down');
                icon.classList.toggle('fa-chevron-up');
            });
        });
        
        // 分类标签选择功能
        document.querySelectorAll('.badge-check').forEach(badge => {
            badge.addEventListener('click', function() {
                // 如果点击的是"全部"，则取消其他所有选择
                if (this.textContent === '全部') {
                    document.querySelectorAll('.badge-check').forEach(b => {
                        b.classList.remove('active', 'bg-success', 'text-white');
                        b.classList.add('bg-light', 'text-dark');
                    });
                    this.classList.add('active', 'bg-success', 'text-white');
                    this.classList.remove('bg-light', 'text-dark');
                } else {
                    // 否则，仅切换当前标签，并取消"全部"的选择
                    this.classList.toggle('active');
                    if (this.classList.contains('active')) {
                        this.classList.remove('bg-light', 'text-dark');
                        this.classList.add('bg-success', 'text-white');
                        
                        // 取消"全部"的选择
                        document.querySelectorAll('.badge-check').forEach(b => {
                            if (b.textContent === '全部') {
                                b.classList.remove('active', 'bg-success', 'text-white');
                                b.classList.add('bg-light', 'text-dark');
                            }
                        });
                    } else {
                        this.classList.remove('bg-success', 'text-white');
                        this.classList.add('bg-light', 'text-dark');
                        
                        // 如果没有选择任何标签，则自动选择"全部"
                        if (document.querySelectorAll('.badge-check.active').length === 0) {
                            document.querySelectorAll('.badge-check').forEach(b => {
                                if (b.textContent === '全部') {
                                    b.classList.add('active', 'bg-success', 'text-white');
                                    b.classList.remove('bg-light', 'text-dark');
                                }
                            });
                        }
                    }
                }
            });
        });
        
        // 范围滑块值显示
        const updateSliderValue = (sliderId, displayId) => {
            const slider = document.getElementById(sliderId);
            const display = document.getElementById(displayId);
            
            slider.addEventListener('input', function() {
                display.textContent = this.value;
            });
        };
        
        updateSliderValue('min-views', 'min-views-value');
        updateSliderValue('min-likes', 'min-likes-value');
        updateSliderValue('mobile-min-views', 'mobile-min-views-value');
        updateSliderValue('mobile-min-likes', 'mobile-min-likes-value');
        
        // 排序选项选择
        document.querySelectorAll('.dropdown-menu .dropdown-item').forEach(item => {
            item.addEventListener('click', function() {
                // 移除所有选中状态
                document.querySelectorAll('.dropdown-menu .dropdown-item i').forEach(icon => {
                    icon.classList.add('d-none');
                });
                
                // 设置当前选中状态
                this.querySelector('i').classList.remove('d-none');
            });
        });
        
        // 移除应用的筛选条件
        document.querySelectorAll('.remove-filter').forEach(btn => {
            btn.addEventListener('click', function() {
                this.parentElement.remove();
                
                // 如果没有筛选条件了，隐藏清除全部按钮
                if (document.querySelectorAll('.applied-filter').length === 0) {
                    document.querySelector('.clear-filters').style.display = 'none';
                }
            });
        });
        
        // 清除全部筛选条件
        document.querySelector('.clear-filters').addEventListener('click', function() {
            document.querySelectorAll('.applied-filter').forEach(filter => {
                filter.remove();
            });
            this.style.display = 'none';
            
            // 重置所有筛选器
            resetAllFilters();
        });
        
        // 重置所有筛选器
        function resetAllFilters() {
            // 重置分类标签
            document.querySelectorAll('.badge-check').forEach(badge => {
                badge.classList.remove('active', 'bg-success', 'text-white');
                badge.classList.add('bg-light', 'text-dark');
                if (badge.textContent === '全部') {
                    badge.classList.add('active', 'bg-success', 'text-white');
                }
            });
            
            // 重置时间筛选
            document.querySelectorAll('input[name="time-filter"]').forEach(radio => {
                radio.checked = radio.id === 'time-all';
            });
            document.querySelectorAll('input[name="mobile-time-filter"]').forEach(radio => {
                radio.checked = radio.id === 'mobile-time-all';
            });
            
            // 重置内容筛选复选框
            document.querySelectorAll('#has-images, #has-videos, #verified, #mobile-has-images, #mobile-has-videos, #mobile-verified').forEach(checkbox => {
                checkbox.checked = false;
            });
            
            // 重置滑块
            document.querySelectorAll('.range-slider').forEach(slider => {
                slider.value = 0;
                const displayId = slider.id.replace('mobile-', '') + '-value';
                document.getElementById(displayId)?.setAttribute('textContent', '0');
                document.getElementById('mobile-' + displayId)?.setAttribute('textContent', '0');
            });
            
            // 重置城市选择
            document.querySelectorAll('#city, #mobile-city').forEach(select => {
                select.value = '';
            });
            
            // 重置线上交换选项
            document.querySelectorAll('#online-only, #mobile-online-only').forEach(checkbox => {
                checkbox.checked = false;
            });
        }
        
        // 图片懒加载
        document.addEventListener("DOMContentLoaded", function() {
            const lazyImages = document.querySelectorAll("img");
            
            if ("IntersectionObserver" in window) {
                const imageObserver = new IntersectionObserver((entries, observer) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const image = entry.target;
                            image.classList.add('opacity-100');
                            image.classList.remove('opacity-0');
                            imageObserver.unobserve(image);
                        }
                    });
                });
                
                lazyImages.forEach(image => {
                    imageObserver.observe(image);
                    image.classList.add('transition-opacity', 'duration-500', 'opacity-0');
                });
            }
        });
    </script>
</body>
</html>
    
